<script setup lang="ts">
import SearchAfterComponents from "@/components/SearchAfterComponents.vue";
import LoadComponent from "@/components/LoadComponent.vue"
import { computed, onMounted, ref } from "vue";
import { Api } from "../../assets/api/api";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";

// 热搜数据
const hotSearchData = ref<Array<Array<Object>>>([]);
const hotIndex = ref(0);
//搜索热词
const hotWords = ref<Array<Array<Object>>>([]);
//搜索关键词
const keyWord = ref("");
//控制历史搜索显示隐;
const historyChange = ref(false);
const historyData = ref("");
const historyList = ref([]);
//搜索数据
const searchData = ref([]);
//控制搜索前模块显示隐藏
const searchBefore = ref(true);

//vue3自带方法
const router  = useRouter();

//获取热搜数据
const HotSearchGet = async () => {
  let { data } = await Api.getHomePageUrl();
  let arr1 = [];
  let arr2 = [];
  let arr3 = [];
  arr1 = data.data.list[2].list;
  arr1.splice(0, 1);
  arr2 = data.data.list[3].list;
  arr2.push(data.data.list[4].list[0]);
  arr3 = data.data.list[5].list;
  arr3.push(data.data.list[6].list[0]);
  hotSearchData.value.push(arr1);
  hotSearchData.value.push(arr2);
  hotSearchData.value.push(arr3);
};
// 换一换
const hotChange = () => {
  if (hotIndex.value < 2) {
    hotIndex.value += 1;
  } else {
    hotIndex.value = 0;
  }
};
//搜索热词数据
const hotWordsDataGet = async () => {
  let { data } = await Api.SearchHotUrl();
  let arr = [];
  let end = 2;
  for (let i = 0; i < data.list.length; i++) {
    if (i <= end) {
      arr.push(data.list[i]);
      if (i == 2) {
        end += 3;
        hotWords.value.push(arr);
        arr = [];
      } else if (i == data.list.length - 1) {
        hotWords.value.push(arr);
        arr = [];
      }
    }
  }
};
//点击热词搜索
const SearchClick = (key: String) => {
  keyWord.value = key as any;
  Search();
};
//搜索
const Search = async () => {
  if (keyWord.value.trim() != "") {
    searchData.value = [];
    searchBefore.value = false;
    let { data } = await Api.SearchUrl(keyWord.value);
    searchData.value = data.data.books;
    historyData.value = keyWord.value;
    if (localStorage.getItem("historyData")) {
      let arr = JSON.parse(localStorage.getItem("historyData") as any);
      // for循环遍历判断历史记录有没有相同数据
      for (let i = 0; i < arr.length; i++) {
        if (historyData.value == arr[i]) {
          arr.splice(i, 1);
          localStorage.setItem(
            "historyData",
            JSON.stringify([historyData.value, ...arr])
          );
          return;
        } else if (i == arr.length - 1) {
          localStorage.setItem(
            "historyData",
            JSON.stringify([
              historyData.value,
              ...JSON.parse(localStorage.getItem("historyData") as any),
            ])
          );
        }
      }
    } else {
      localStorage.setItem("historyData", JSON.stringify([historyData.value]));
    }
  } else {
    showToast("请输入作者或书名");
  }
  historyChange.value = false;
};

//获取搜索记录数据
const getHistoryData = () => {
  historyList.value = JSON.parse(localStorage.getItem("historyData") as any);
};
//控制历史搜索记录显示隐藏
const historyBoxChange = () => {
  getHistoryData();
  if (localStorage.getItem("historyData")) {
    historyChange.value = true;
  } else {
    historyChange.value = false;
  }
};
//点击历史记录搜索
const histroyClick = (e: any, key: any) => {
  if (e.target.tagName == "P") {
    keyWord.value = key;
    Search();
  }
};
//点击删除历史记录
const delHistoryClick = (i: Number) => {
  if (localStorage.getItem("historyData")) {
    let arr = JSON.parse(localStorage.getItem("historyData") as any);
    arr.splice(i, 1);
    localStorage.setItem("historyData", JSON.stringify([...arr]));
    getHistoryData();
  }
};

// 检测搜索数据
const searchDataChange = computed(() => {
  return searchData.value.length > 0 ? true : false;
});

onMounted(() => {
  HotSearchGet();
  hotWordsDataGet();
  getHistoryData();
});
</script>

<template>
  <!-- 导航栏 -->
  <nav>
    <div @click="router.go(-1)" class="app"></div>
    <h1>搜索</h1>
    <div class="sourch">
      <p @click="router.push('/bookshelfv')">书架</p>
    </div>
  </nav>
  <!-- 搜索 -->
  <div class="seek" @mouseleave="historyChange = false">
    <input
      type="text"
      placeholder="作者名/书名"
      v-model="keyWord"
      @mouseenter="historyBoxChange"
    />
    <div class="seek_btn" @click="Search"></div>
    <div class="history" v-if="historyChange">
      <div class="record">
        <p
          @click="histroyClick($event, item)"
          v-for="(item, index) in historyList"
          :key="index"
        >
          {{ item }}
          <span @click="delHistoryClick(index)"></span>
        </p>
      </div>
      <button class="close" @click="historyChange = false">关闭</button>
    </div>
  </div>
  <!-- 搜索前 -->
  <div class="searchBefore" v-if="searchBefore">
    <!-- 热搜 -->
    <div class="hot_search">
      <span>24小时热搜</span>
      <a href="javascript:;" @click="hotChange">换一换</a>
    </div>
    <div class="hot_search_book">
      <ul>
        <li v-for="item in hotSearchData[hotIndex]" :key="item.id" @click="router.push('/detail/'+item.id)">
          <img :src="item.cover" alt="img" />
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </div>
    <!-- 热词 -->
    <div class="hot_word">
      <h1>搜索热词</h1>
      <div class="word" v-for="(item, index) in hotWords" :key="index">
        <span
          v-for="(s_item, index) in item"
          :key="index"
          @click="SearchClick(s_item.name)"
          >{{ s_item.name }}</span
        >
      </div>
    </div>
  </div>
  <!-- 搜索后 -->
  <div class="searchAfter" v-if="!searchBefore">
    <SearchAfterComponents v-if="searchDataChange" :searchData="searchData"></SearchAfterComponents>
    <LoadComponent :load="!searchDataChange"></LoadComponent>
  </div>
  
</template>

<style lang="scss" scoped>
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f7f7f7;
  border-bottom: 1px solid #cbcbcb;
  .app {
    width: 17px;
    height: 17px;
    background: url(https://img.xmkanshu.com/operateimg/img/img/18721/18721.png)
      no-repeat 12px 0px;
    background-size: 8px 13px;
    margin-top: 13px;
    padding-left: 11px;
    padding-right: 44px;
  }
  h1 {
    font-size: 17px;
    color: #333333;
    padding-top: 12px;
    padding-bottom: 10px;
    font-weight: normal;
  }
  .sourch {
    display: flex;
    width: 60px;
    padding-right: 12px;
    justify-content: flex-end;
    align-items: center;
    p {
      font-size: 12px;
      color: #999999;
    }
    .img {
      width: 16px;
      height: 16px;
      background: url(https://img.xmkanshu.com/operateimg/img/img/18697/18697.png)
        no-repeat center center;
      background-size: cover;
    }
  }
}
.seek {
  position: relative;
  display: flex;
  width: 343px;
  height: 33px;
  border: 1px solid #d2d6d8;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 15px;
  .seek_btn {
    width: 42px;
    background: #fff
      url(https://img.xmkanshu.com/operateimg/img/img/18712/18712.png) no-repeat
      center center;
    background-size: 16px;
    border-left: 1px solid #d2d6d8;
  }
  input {
    width: 290px;
    padding-left: 10px;
    border: none;
    background-color: #fff;
  }
  .history {
    position: absolute;
    width: 100%;
    top: 35px;
    left: -1px;
    border: 1px solid #d3d3d3;
    border-top: none;
    z-index: 999;
    .record {
      width: 100%;
      background-color: #fff;
      border-bottom: 1px solid #d3d3d3;
    }
    p {
      position: relative;
      height: 40px;
      line-height: 40px;
      padding-left: 40px;
      font-size: 14px;
      color: #2c3e50;
      z-index: 10;
      &::before {
        position: absolute;
        content: "";
        left: 20px;
        width: 26px;
        height: 26px;
        background: url(https://img.xmkanshu.com/operateimg/img/img/14766/14766.png)
          left center no-repeat;
        background-size: 13px 13px;
        background-position: 0px 13px;
        color: #2c3e50;
      }
    }
    span {
      width: 30px;
      height: 40px;
      background: url(https://img.xmkanshu.com/operateimg/img/img/15415/15415.png)
        center center no-repeat;
      background-size: 12px;
      position: absolute;
      right: 0px;
      margin-top: 0px;
      padding-left: 20px;
      z-index: 999;
    }
    .close {
      width: 100%;
      background: #eaeaea;
      height: 40px;
      border: none;
      font-size: 14px;
      color: #000;
    }
  }
}
.hot_search {
  height: 38px;
  line-height: 38px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  padding-left: 20px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  a {
    font-size: 14px;
    color: #000;
  }
}
.hot_search_book {
  background-color: #fff;
  ul {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
  }
  li {
    text-align: center;
    img {
      width: 60px;
      height: 80px;
    }
    p {
      width: 72px;
      line-height: 24px;
      text-align: center;
      color: #000000;
      font-size: 12px;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*设置隐藏行数*/
      -webkit-box-orient: vertical;
    }
  }
}
.hot_word {
  margin-top: 10px;

  h1 {
    height: 38px;
    line-height: 38px;
    background-color: #fff;
    font-size: 16px;
    color: #000;
    padding-left: 20px;
    padding-right: 10px;
    display: flex;
    font-weight: normal;
    justify-content: space-between;
    border-bottom: 1px solid #d3d3d3;
  }
  .word {
    background-color: #fff;
    border-bottom: 1px solid #d3d3d3;
    span {
      display: inline-block;
      width: 124px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      color: #2c3e50;
      &:nth-of-type(1) {
        border-right: 1px solid #d3d3d3;
      }
      &:nth-of-type(2) {
        border-right: 1px solid #d3d3d3;
      }
    }
  }
}
footer {
  p {
    text-align: center;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
}
</style>